<template>
	<view id="login">
		<view>
			<form @submit="formSubmit">
				<!-- 账户 -->
				<view class="form_msg">
					<view class="icon_user"></view>
					<input class="uni-input" type="text" name="user" placeholder="账户名" />
				</view>
				<!-- 密码 -->
				<view class="form_msg">
					<view class="icon_pwd"></view>
					<input class="uni-input" type="password" name="pwd" placeholder="密码" />
				</view>
				<!-- 记住账号 -->
				<view class="rember">
					<checkbox-group name="checkbox">
						<label>
							<checkbox value="turn" /><text>记住账号</text>
						</label>
					</checkbox-group>
				</view>
				<!-- 登陆 -->
				<view class="submit">
					<button form-type="submit">登陆</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				console.log('登陆')
				// var formdata = e.detail.value
				uni.switchTab({
					url:'./index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#login {
		width: 750rpx;
		height: auto;
		margin-top: 128rpx;

		.form_msg {
			margin: auto;
			display: flex;
			width: 610rpx;
			height: 80rpx;
			text-indent: 47rpx;
			color: rgba(190, 190, 190, 1);
			background-color: rgba(255, 255, 255, 1);
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 150%;
			box-shadow: 0px 0px 12rpx 0px rgba(230, 230, 230, 1);
			text-align: left;

			.icon_user {
				width: 38rpx;
				height: 38rpx;
				background-image: url('');
				background-size: contain;
			}

			.icon_pwd {
				width: 38rpx;
				height: 38rpx;
				background-image: url('');
				background-size: contain;
			}
		}

		.rember {
			margin: 30rpx auto 0 auto;
			width: 610rpx;

			uni-text {
				font-size: 20rpx;

			}
		}

		.submit {
			button {
				margin: 56rpx auto 0 auto;
				width: 610rpx;
				height: 80rpx;
				color: rgba(255, 255, 255, 1);
				background-color: rgba(42, 130, 228, 1);
				border-radius: 40rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				box-shadow: 0px 4rpx 4rpx 0px rgba(42, 130, 228, 0.3);
				text-align: center;
			}
		}
	}
</style>
